import {prefix} from '@/config/global';
import {MenuRoute} from '@/interface';

const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
    if (!list) {
        return [];
    }
    return list
        .map((item) => {
            const path = basePath ? `${basePath}/${item.path}` : item.path;
            return {
                path,
                title: item.meta?.title,
                icon: item.meta?.icon || '',
                children: getMenuList(item.children, path),
                meta: item.meta,
                redirect: item.redirect,
            };
        })
        .filter((item) => item.meta && item.meta.hidden !== true);
};

export default {
    props: {
        navData: Array,
        headerMenuWidth: Number,
    },
    data() {
        return {
            prefix,
        };
    },
    computed: {
        list(): Array<MenuRoute> {
            return getMenuList(this.navData);
        },
    },
    // watch:{
    //   headerMenuWidth:{
    //     immediate: true,
    //     handler(val) {
    //       if (val) {
    //         console.log(val,'1111')
    //       }
    //     }
    //   }
    // },
    methods: {
        renderIcon(item) {
            if (typeof item.icon === 'string') {
                return () => item.icon && <t-icon name={item.icon}></t-icon>;
            }

            if (typeof item.icon === 'function' || (item.icon && typeof item.icon.render === 'function')) {
                return () =>
                    this.$createElement(item.icon, {
                        class: 't-icon',
                    });
            }
            return '';
        },
        renderNav(list: Array<MenuRoute>, maxCount: number) {
            // 超出的子系统折叠
            const outList = []
            const newList = list.map((item, index) => {
                if (index > maxCount - 1 && maxCount > 0 && maxCount !== list.length) {
                    outList.push(item)
                    return false;
                }
                if (!item.children || !item.children.length || item.meta?.single) {
                    const href = item.path.match(/(http|https):\/\/([\w.]+\/?)\S*/);
                    if (href) {
                        return (
                            <t-menu-item
                                href={href?.[0]}
                                name={item.path}
                                value={item.meta?.single ? item.redirect : item.path}
                                icon={this.renderIcon(item)}
                            >
                                {item.title}
                            </t-menu-item>
                        );
                    }
                    if (!item.meta.isOrNot) {
                        return (
                            <t-tooltip content="需开通权限">
                                <t-menu-item disabled
                                             name={item.path}
                                             value={item.meta?.single ? item.redirect : item.path}
                                             to={item.path}
                                    // icon={this.renderIcon(item)}
                                >
                                    {item.title}
                                </t-menu-item>
                            </t-tooltip>
                        );
                    }
                    return (
                        <t-menu-item
                            name={item.path}
                            value={item.meta?.single ? item.redirect : item.path}
                            to={item.path}
                            // icon={this.renderIcon(item)}
                        >
                            {item.title}
                            {/* <div style={{ */}
                            {/*    "display":"flex", */}
                            {/*    "flex-direction":"column", */}
                            {/*    "align-items":"center", */}
                            {/* }}> */}
                            {/*    <div style={{ */}
                            {/*        "width":"40px", */}
                            {/*        "height":"40px", */}
                            {/*        "backgrund-repeat":"no-repeat", */}
                            {/*        "background-size":"100% 100%", */}
                            {/*        "background-image":`url('${tfl}')` */}
                            {/*    }}></div> */}
                            {/*    */}
                            {/* </div> */}


                        </t-menu-item>
                    );
                }
                return (
                    <t-submenu name={item.path} value={item.path} title={item.title} icon={this.renderIcon(item)}>
                        {item.children && this.renderNav(item.children)}
                    </t-submenu>
                );
            });
            if (outList.length > 0) {
                newList.push((<t-submenu value="2-1" title="更多">
                    {this.renderNav(outList, 0)}
                </t-submenu>))
            }
            return newList;
        },
    },
    render() {
        const maxCount = parseInt(String(this.headerMenuWidth / 110), 10);
        return <div>{this.renderNav(this.list, maxCount)}</div>;
    },
};
